{% extends "templates/marketplace/base.html" %} {%- block body -%}
<div class="px-4 sm:px-8">
	<div class="pt-20 pb-12 text-center">
		<h1 class="text-3xl font-bold text-gray-900">
			One Click Apps for your Frappe Sites
		</h1>
		<p class="max-w-lg mx-auto mt-4 text-gray-600">
			Extend functionality of your Frappe sites by finding an app that suits you
			and install it in a few steps.
		</p>
	</div>

<div class="flex pb-36">
	<div class="w-80 hidden sm:block">
		<h2 class="text-xl text-gray-800 font-semibold">Categories</h2>
		<div class="flex flex-col mt-4">
			{%- for category in categories -%}
			<div class="relative -left-2 mr-8 text-base transition hover:bg-gray-50 text-gray-700 rounded-lg">
				<button
				id="category-button"
				class="w-full text-left rounded py-1 pl-2" value="{{ category }}">
					{{ category }}
				</button>
			</div>
			{%- endfor -%}
		</div>
	</div>

	<div class="w-full pb-36">
		<div>
			<div class="flex flex-col sm:flex-row sm:justify-between">
				<h2 class="text-xl font-bold text-gray-800">Apps</h2>
				<div class="flex flex-row mt-3">
					<button id="remove-category" class="hidden flex bg-gray-100 border-gray-700 text-sm text-gray-700 items-center px-2 mx-2 rounded-lg transition hover:shadow">
						<span id="remove-category-name" class="block items-center mr-1"></span>
						<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
					</button>
					<input type="text"
						class="placeholder-gray-500 rounded-md border-0 bg-gray-100 py-1 px-2 text-base leading-5 focus:bg-gray-200 focus:shadow-none focus:ring-0 block w-full sm:mt-0 sm:w-60 h-8"
						id="app-search-input" placeholder="Search for apps" />
				</div>
			</div>
			<div id="all-apps-list" class="grid grid-cols-1 gap-8 mt-8 md:grid-cols-2 lg:grid-cols-3 sm:grid-cols-2">
				{%- for app in apps -%}
				<a href="/{{ app.route }}" id="{{app.name}}" data-title="{{ app.title }}"
					data-description="{{ app.description }}"
		 			data-categories="{{ app.categories }}"
					class="app-card flex flex-col justify-between p-6 border border-gray-100 rounded-lg shadow cursor-pointer transition hover:shadow-lg focus:outline-none focus:border-gray-500 focus:shadow-outline">
					<div>
						<img alt="{{app.title}} Logo" src="{{ app.image }}"
							class="w-10 h-10 border border-gray-200 rounded-lg" />
						<h3 class="mt-4 font-semibold">{{ app.title }}</h3>
						<p class="mt-2 text-base text-gray-600 line-clamp">
							{{ app.description }}
						</p>
					</div>
					<span class="flex flex-row text-sm mt-2 text-gray-600">
						<i class="w-4 h-4 mr-2" data-feather="download"></i>
						<span>{{ app.total_installs | number_k_format }} {{ 'install' if
							app.total_installs == 1 else 'installs' }}</span>
					</span>
				</a>
				{%- endfor -%}
			</div>

			<div id="no-results-message" style="display: none;">
				<p class="text-gray-700">No apps found.</p>
			</div>
		</div>
	</div>

</div>

</div>
<span class="bg-gray-200"></span>

{{ include_script('marketplace.bundle.js') }}
{%- endblock -%}
